<script setup>
import { useUserStore } from "~/stores/user.js";

const userStore = useUserStore();

const client = useSupabaseClient();

const logout = ()=> {
    client.auth.signOut()
    userStore.isLogoutOverlay = false

    return navigateTo('/')
}
</script>

<template>
    <div id="modal" class="fixed grid place-items-center h-screen z-50 bottom-0 bg-black bg-opacity-50 backdrop-blur-md w-full">
        <div class="bg-black w-full max-w-[300px] rounded-lg text-white border border-gray-600 p-2">
            <button class="flex items-center justify-between bg-black w-full p-3" @click="()=> userStore.isLogoutOverlay = false">
                <span>Close Modal</span>
                <Icon name="mdi:close" size="25" />
            </button>
            <div class="border-b border-b-gray-700 my-1"></div>
            <button @click="logout" class="flex items-center justify-between bg-black w-full p-3">
                <span>Log Out</span>
                <Icon name="ph:sign-out" size="25" />
            </button>
        </div>
    </div>
</template>

<style scoped>

</style>